<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>聊天室</title>
<!--    <link rel="stylesheet" type = "text/css" href="../static/lib/iview/css/iview.css" />-->
    <link rel="stylesheet" type = "text/css" href="/css/chat.css" />
    <script src="/js/jquery-1.8.2.min.js"></script>
<!--    <script src="../static/lib/iview/vue.min.js"></script>-->
<!--    <script src="../static/lib/iview/iview.min.js"></script>-->
    <script src="/js/common.js"></script>
<!--    <script type="text/javascript" charset="utf-8" src="../static/lib/ueditor/ueditor.config.js"></script>-->
<!--    <script type="text/javascript" charset="utf-8" src="../static/lib/ueditor/ueditor.all.js"> </script>-->
<!--    <script type="text/javascript" charset="utf-8" src="../static/lib/ueditor/lang/zh-cn/zh-cn.js"></script>-->
    <script src="/js/chatroom.js"></script>
</head>
<body>
<Layout id="app" style="overflow-y:hidden;">
    <Spin fix v-show="fullScreenloading">
        <img src="../../static/image/loadm.png" class="demo-spin-icon-load ivu-icon-load-c"></img>
        <div>{{loadMsg}}</div>
    </Spin>
    <row class="chatbody">
        <row class="toolBar">
            <i-Button type="primary" icon="ios-add" :disabled="null != ws" @click="openConnectWin()">连接服务器</i-Button>
            <i-Button type="primary" icon="ios-add" :disabled="null == ws" @click="quitServer()">退出</i-Button>
            <div class="clearfix"></div>
        </row>
        <row class="chatArea">
            <i-col span="19" class="chatLeft">
                <row class="chatView">
                    <div class="msg" v-for="msg in msgList" v-html="msg"></div>
                </row>
                <row class="inputArea">
                    <row class="inputForm">
                        <script id="editor" type="text/plain" style="width:100%;height:170px;"></script>
                        <!--<i-input :size="styleSize" type="textarea" v-model="formData.content" :rows="6"></i-input>-->
                    </row>
                    <row class="sendTool">
                        <i-Button type="primary" @click="sendMsg()">发送</i-Button>
                    </row>
                </row>
            </i-col>
            <i-col span="5" class="chatUserList">
                <div class="userTitle">
                    <div class="title">成员列表</div>
                    <div class="userBtnArea">
                        <i-Button :size="styleSize" type="primary" @click="clearChooseUser()">清除选中</i-Button>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <ul>
                    <li :class="toUser==item.userBh?'selUser':''" @click="chooseUser(item.userBh)" v-for="item in chatUserList">{{item.userName}}<span class="loginDate">{{item.onlineTime}}</span></li>
                </ul>
            </i-col>
        </row>
    </row>

    <Modal id="connectWin" v-model="connectModal" title="连接服务器"width="500" height="200" >
        <i-form ref="editValidate" :model="sendUser" :rules="editRuleValidate" :label-width="80" style="padding:5px 50px 5px 20px;overflow-y: auto;" >
            <i-col span="24">
                <form-item label="用户ID" prop="userBh">
                    <i-input :size="styleSize" v-model="sendUser.userBh"  ></i-input>
                </form-item>
            </i-col>
            <i-col span="24">
                <form-item label="用户昵称" prop="userName">
                    <i-input :size="styleSize" v-model="sendUser.userName"  ></i-input>
                </form-item>
            </i-col>
        </i-form>
        <div class="clearfix"></div>
        <div slot="footer">
            <i-Button :size="styleSize" type="primary" @click="connectServer()">连接</i-Button>
            <i-Button :size="styleSize" type="warning" @click="cancelFunc">取消</i-Button>
        </div>
    </Modal>
</Layout>
</body>
</html>
